import React, { useEffect, useState } from 'react'
import './index.scss';
import axios from 'axios';
import { SideBar } from 'antd-mobile'
import abc from '../../img/gift.png'
import abc1 from '../../img/two-member.png'
import abc2 from '../../img/new_shopCart1.png'
// import { values } from 'lodash';

const Category = () => {
    const [tabsList, setTabsList] = useState([]);
    const [cateList, setCateList] = useState([]);
    const [activeKey, setActiveKey] = useState("312");

    useEffect(() => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList', { "isWholeSale": 0, "channelId": null }
        ).then(res => {
            console.log(res);
            setTabsList(res.data.data.categoryInfo);
        })

        //获取右侧数据
        getCateData(activeKey);
    }, [])

    const setActiveKeyFn = (value) => {
        setActiveKey(value);
        getCateData(value);
    }

    const getCateData = (activeKey) => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
        ).then(res => {
            console.log(res);
            setCateList(res.data.data.commodityInfo);
        })
    }

    return (
        <div className="cate_con">
            <div className='cate_left'>
                <SideBar activeKey={activeKey} onChange={setActiveKeyFn}>
                    {tabsList.map(item => (
                        <SideBar.Item key={item.code} title={item.displayName} />
                    ))}
                </SideBar>
            </div>
            <div className='cate_right'>
                <ul>
                    {
                        cateList.map(item => <li key={item.key}>
                            <div className='right_img'>
                                <img src={item.template.listImages} alt={item.template.listImages} />
                            </div>
                            <div className='right_text'>
                                <span>{item.name}</span>
                                <span className='span1'>{item.template.displayName}</span>
                                <span><img src={abc} alt={1} /></span>
                                <span className='price'>
                                    <span>￥{item.template.retailPrice} </span>
                                    <span>￥{item.template.supplyPrice}</span>
                                    <img src={abc1} alt={2} />
                                </span>
                                <img src={abc2} alt={2} className='shop' />
                            </div>
                        </li>)
                    }
                </ul>
            </div>
        </div>
    )
}
export default Category;
// export default class Category extends Component {
//     constructor() {
//         super();
//         this.state = {
//             tabsList: [],//左侧菜单列表数据
//             cateList: [],//右侧数据
//             activeKey: "312",
//         }
//     }

//     componentDidMount() {
// axios.post(
//     'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList', { "isWholeSale": 0, "channelId": null }
// ).then(res => {
//     console.log(res);
//     this.setState({ tabsList: res.data.data.categoryInfo })
// })

// //获取右侧数据
// this.getCateData();


//     }

//     getCateData = () => {
//         axios.post(
//             'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": this.state.activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
//         ).then(res => {
//             console.log(res);
//             this.setState({ cateList: res.data.data.commodityInfo })
//             console.log(this.state.cateList);
//         })
//     }

//     setActiveKey = (value) => {
//         console.log("左侧菜单点击了", value);
//         //将 value的值赋值给 state
//         this.setState({
//             activeKey: value
//         }, () => {
//             this.getCateData();
//         })

//     }


